<template>
    <el-main>
        <el-row :gutter="20">
            <el-col :span="7" class="mian-aside">
                <el-card class="box-card">
                    <span class="title-blod">TA的创作</span>
                    <el-divider></el-divider>
                    <div @click="handlerCommand('personal')" :class="type==='personal' ? 'title-tag-check' : 'title-tag'">
                        <span><i class="el-icon-s-custom" style="font-size: 18px;"></i> TA的资料</span>
                    </div>
                    <el-divider></el-divider>
                    <div @click="handlerCommand('blog')" :class="type==='blog' ? 'title-tag-check' : 'title-tag'">
                        <span><i class="el-icon-notebook-1" style="font-size: 18px;"></i> TA的博文</span>
                        <span class="num-tag">{{personNums.blog}}</span>
                    </div>
                    <el-divider></el-divider>
                    <div @click="handlerCommand('question')" :class="type==='question' ? 'title-tag-check' : 'title-tag'">
                        <span><i class="el-icon-question" style="font-size: 18px;"></i> TA的问题</span>
                        <span class="num-tag">{{personNums.question}}</span>
                    </div>
                    <el-divider></el-divider>
                    <div @click="handlerCommand('link')" :class="type==='link' ? 'title-tag-check' : 'title-tag'">
                        <span><i class="el-icon-link" style="font-size: 18px;"></i> TA的链接</span>
                        <span class="num-tag">{{personNums.link}}</span>
                    </div>
                    <el-divider></el-divider>
                    <div @click="handlerCommand('discuss')" :class="type==='discuss' ? 'title-tag-check' : 'title-tag'">
                        <span><i class="el-icon-chat-round" style="font-size: 18px;"></i> TA的讨论</span>
                        <span class="num-tag">{{personNums.discuss}}</span>
                    </div>
                    <el-divider></el-divider>
                    <div @click="handlerCommand('topic')" :class="type==='topic' ? 'title-tag-check' : 'title-tag'">
                        <span><i class="el-icon-s-grid" style="font-size: 18px;"></i> TA的话题</span>
                        <span class="num-tag">{{personNums.topic}}</span>
                    </div>
                    <el-divider></el-divider>
                </el-card>

                <el-card class="box-card">
                    <span class="title-blod">TA的互动</span>
                    <el-divider></el-divider>
                    <div @click="handlerCommand('answer')" :class="type==='answer' ? 'title-tag-check' : 'title-tag'">
                        <span><i class="el-icon-chat-round" style="font-size: 18px;"></i> TA的回复</span>
                        <span class="num-tag">{{personNums.answer}}</span>
                    </div>
                    <el-divider></el-divider>
                    <div @click="handlerCommand('collection')" :class="type==='collection' ? 'title-tag-check' : 'title-tag'">
                        <span><i class="el-icon-star-off" style="font-size: 18px;"></i> TA的收藏</span>
                        <span class="num-tag">{{personNums.collection}}</span>
                    </div>
                    <el-divider></el-divider>
                    <div @click="handlerCommand('followed')" :class="type==='followed' ? 'title-tag-check' : 'title-tag'">
                        <span><i class="el-icon-picture-outline-round" style="font-size: 18px;"></i> TA关注的</span>
                        <span class="num-tag">{{personNums.followed}}</span>
                    </div>
                    <el-divider></el-divider>
                    <div @click="handlerCommand('favourited')" :class="type==='favourited' ? 'title-tag-check' : 'title-tag'">
                        <span><i class="el-icon-help" style="font-size: 18px;"></i> TA喜欢的</span>
                        <span class="num-tag">{{personNums.favourited}}</span>
                    </div>
                    <el-divider></el-divider>
                    <!-- <div @click="handlerCommand('vote')" :class="type==='vote' ? 'title-tag-check' : 'title-tag'">
                        <span><i class="el-icon-thumb" style="font-size: 18px;"></i> TA的点赞</span>
                        <span class="num-tag">{{personNums.vote}}</span>
                    </div>
                    <el-divider></el-divider> -->
                </el-card>

                <el-card class="box-card">
                    <span class="title-blod">TA的关系</span>
                    <el-divider></el-divider>
                    <div @click="handlerCommand('follower')" :class="type==='follower' ? 'title-tag-check' : 'title-tag'">
                        <span><i class="el-icon-view" style="font-size: 18px;"></i> TA的关注</span>
                        <span class="num-tag">{{personNums.follower}}</span>
                    </div>
                    <el-divider></el-divider>
                    <div @click="handlerCommand('fance')" :class="type==='fance' ? 'title-tag-check' : 'title-tag'">
                        <span><i class="el-icon-s-opportunity" style="font-size: 18px;"></i> TA的粉丝</span>
                        <span class="num-tag">{{personNums.fance}}</span>
                    </div>
                    <el-divider></el-divider>
                </el-card>
            </el-col>
            <el-col :span="17">
                <el-card v-if="type === 'follower'" class="box-card" style="min-height: 200px;">
                    <h3>TA关注的用户({{page.total}})</h3>
                    <el-divider></el-divider>
                    <el-row v-for="item in cardListData" :key="item.id" class="question-box" style="border-bottom: #c0c4cc 1px solid;color: #606266;font-size: 14px;">
                        <el-col :span="24">
                            <div class="title-cusor" @click="showFFDetail(item.user_id)">
                                <avue-avatar size="large" :src="item.avatar"></avue-avatar>
                                &nbsp;
                                <el-link type="primary">{{item.nickname}}</el-link>
                            </div>
                        </el-col>
                    </el-row>
                    <avue-empty v-if="cardListData.length === 0" desc="暂无关注用户">
                    </avue-empty>
                    <el-pagination
                        @current-change="handleCurrentChange"
                        :hide-on-single-page=true
                        prev-text="上一页"
                        next-text="下一页"
                        :current-page="page.currentPage"
                        :page-size="page.pageSize"
                        :page-count="page.total"
                        :total="page.total">
                    </el-pagination>
                </el-card>

                <el-card v-if="type === 'fance'" class="box-card" style="min-height: 200px;">
                    <h3>TA的粉丝用户({{page.total}})</h3>
                    <el-divider></el-divider>
                    <el-row v-for="item in cardListData" :key="item.id" class="question-box" style="border-bottom: #c0c4cc 1px solid;color: #606266;font-size: 14px;">
                        <el-col :span="24">
                            <div class="title-cusor" @click="showFFDetail(item.follower_id)">
                                <avue-avatar size="large" :src="item.avatar"></avue-avatar>
                                &nbsp;
                                <el-link type="primary">{{item.nickname}}</el-link>
                            </div>
                        </el-col>
                    </el-row>
                    <avue-empty v-if="cardListData.length === 0" desc="TA还没有粉丝">
                    </avue-empty>
                    <el-pagination
                        @current-change="handleCurrentChange"
                        :hide-on-single-page=true
                        prev-text="上一页"
                        next-text="下一页"
                        :current-page="page.currentPage"
                        :page-size="page.pageSize"
                        :page-count="page.total"
                        :total="page.total">
                    </el-pagination>
                </el-card>

                <el-card v-if="type === 'blog'" class="box-card" style="min-height: 200px;">
                    <h3>TA的博文({{page.total}})
                    <!-- <span class="crd-btn"><el-button @click="goCrd" size="small" type="success" round><i class="el-icon-edit-outline"></i> 新建博文</el-button></span> -->
                    </h3>
                    <el-divider></el-divider>
                    <el-row v-for="item in cardListData" :key="item.id" class="question-box" style="border-bottom: #c0c4cc 1px solid;color: #606266;font-size: 14px;">
                        <el-col :span="17">
                            <div class="title-cusor" @click="showDetail(item.id, item.user_id)">
                                <el-tag>{{item.topic}}</el-tag>
                                <span>{{item.title}}</span><span v-if="item.lead !==''"> - {{item.lead}}</span>
                            </div>
                        </el-col>
                        <el-col :span="7" style="text-align: right;">
                            <el-tag><i class="el-icon-star-on"></i>{{item.favourite_count}}</el-tag>
                            <el-divider direction="vertical"></el-divider>
                            <el-tooltip class="item" effect="light" :content="`关注(${item.followers_count}) / 评论(${item.answers_count}) / 喜欢(${item.favourite_count}) / 阅读(${item.read_count}) / 创建于：${item.created_at}`" placement="bottom">
                                <span>{{item.timeShow}}</span>
                            </el-tooltip>
                        </el-col>
                    </el-row>
                    <avue-empty v-if="cardListData.length === 0" desc="TA还没有创建任何博文!">
                    </avue-empty>
                    <el-pagination
                        @current-change="handleCurrentChange"
                        :hide-on-single-page=true
                        prev-text="上一页"
                        next-text="下一页"
                        :current-page="page.currentPage"
                        :page-size="page.pageSize"
                        :page-count="page.total"
                        :total="page.total">
                    </el-pagination>
                </el-card>

                <el-card v-if="type === 'question'" class="box-card" style="min-height: 200px;">
                    <h3>TA的问题({{page.total}})
                    <!-- <span class="crd-btn"><el-button @click="goCrd" size="small" type="success" round><i class="el-icon-question"></i> 提个问题</el-button></span> -->
                    </h3>
                    <el-divider></el-divider>
                    <el-row v-for="item in cardListData" :key="item.id" class="question-box" style="border-bottom: #c0c4cc 1px solid;color: #606266;font-size: 14px;">
                        <el-col :span="17">
                            <div class="title-cusor" @click="showDetail(item.id, item.user_id)">
                                <el-tag>{{item.topic}}</el-tag>
                                <span>{{item.title}}</span><span v-if="item.lead !==''"> - {{item.lead}}</span>
                            </div>
                        </el-col>
                        <el-col :span="7" style="text-align: right;">
                            <el-tag><i class="el-icon-star-on"></i>{{item.favourite_count}}</el-tag>
                            <el-divider direction="vertical"></el-divider>
                            <el-tooltip class="item" effect="light" :content="`关注(${item.followers_count}) / 评论(${item.answers_count}) / 喜欢(${item.favourite_count}) / 阅读(${item.read_count}) / 创建于：${item.created_at}`" placement="bottom">
                                <span>{{item.timeShow}}</span>
                            </el-tooltip>
                        </el-col>
                    </el-row>
                    <avue-empty v-if="cardListData.length === 0" desc="TA还没有提过任何问题">
                        <!-- <el-button @click="goCrd" type="success" round><i class="el-icon-question"></i> 提个问题</el-button> -->
                    </avue-empty>
                    <el-pagination
                        @current-change="handleCurrentChange"
                        :hide-on-single-page=true
                        prev-text="上一页"
                        next-text="下一页"
                        :current-page="page.currentPage"
                        :page-size="page.pageSize"
                        :page-count="page.total"
                        :total="page.total">
                    </el-pagination>
                </el-card>

                <el-card v-if="type === 'link'" class="box-card" style="min-height: 200px;">
                    <h3>TA的链接({{page.total}})
                    <!-- <span class="crd-btn"><el-button @click="goCrd" size="small" type="success" round><i class="el-icon-link"></i> 分享链接</el-button></span> -->
                    </h3>
                    <el-divider></el-divider>
                    <el-row v-for="item in cardListData" :key="item.id" class="question-box" style="border-bottom: #c0c4cc 1px solid;color: #606266;font-size: 14px;">
                        <el-col :span="17">
                            <div class="title-cusor" @click="showDetail(item.id, item.user_id)">
                                <el-tag>{{item.topic}}</el-tag>
                                <span>{{item.title}}</span><span v-if="item.lead !==''"> - {{item.lead}}</span>
                            </div>
                        </el-col>
                        <el-col :span="7" style="text-align: right;">
                            <el-tag><i class="el-icon-star-on"></i>{{item.favourite_count}}</el-tag>
                            <el-divider direction="vertical"></el-divider>
                            <el-tooltip class="item" effect="light" :content="`关注(${item.followers_count}) / 评论(${item.answers_count}) / 喜欢(${item.favourite_count}) / 阅读(${item.read_count}) / 创建于：${item.created_at}`" placement="bottom">
                                <span>{{item.timeShow}}</span>
                            </el-tooltip>
                        </el-col>
                    </el-row>
                    <avue-empty v-if="cardListData.length === 0" desc="TA还没有分享任何链接">
                        <!-- <el-button @click="goCrd" type="success" round><i class="el-icon-link"></i> 分享链接</el-button> -->
                    </avue-empty>
                    <el-pagination
                        @current-change="handleCurrentChange"
                        :hide-on-single-page=true
                        prev-text="上一页"
                        next-text="下一页"
                        :current-page="page.currentPage"
                        :page-size="page.pageSize"
                        :page-count="page.total"
                        :total="page.total">
                    </el-pagination>
                </el-card>

                <el-card v-if="type === 'discuss'" class="box-card" style="min-height: 200px;">
                    <h3>TA的讨论({{page.total}})
                    <!-- <span class="crd-btn"><el-button @click="goCrd" size="small" type="success" round><i class="el-icon-chat-round"></i> 发起讨论</el-button></span> -->
                    </h3>
                    <el-divider></el-divider>
                    <el-row v-for="item in cardListData" :key="item.id" class="question-box" style="border-bottom: #c0c4cc 1px solid;color: #606266;font-size: 14px;">
                        <el-col :span="17">
                            <div class="title-cusor" @click="showDetail(item.id, item.user_id)">
                                <el-tag>{{item.topic}}</el-tag>
                                <span>{{item.title}}</span><span v-if="item.lead !==''"> - {{item.lead}}</span>
                            </div>
                        </el-col>
                        <el-col :span="7" style="text-align: right;">
                            <el-tag><i class="el-icon-star-on"></i>{{item.favourite_count}}</el-tag>
                            <el-divider direction="vertical"></el-divider>
                            <el-tooltip class="item" effect="light" :content="`关注(${item.followers_count}) / 评论(${item.answers_count}) / 喜欢(${item.favourite_count}) / 阅读(${item.read_count}) / 创建于：${item.created_at}`" placement="bottom">
                                <span>{{item.timeShow}}</span>
                            </el-tooltip>
                        </el-col>
                    </el-row>
                    <avue-empty v-if="cardListData.length === 0" desc="TA还没有创建任何讨论话题">
                        <!-- <el-button @click="goCrd" type="success" round><i class="el-icon-chat-round"></i> 发起讨论</el-button> -->
                    </avue-empty>
                    <el-pagination
                        @current-change="handleCurrentChange"
                        :hide-on-single-page=true
                        prev-text="上一页"
                        next-text="下一页"
                        :current-page="page.currentPage"
                        :page-size="page.pageSize"
                        :page-count="page.total"
                        :total="page.total">
                    </el-pagination>
                </el-card>

                <el-card v-if="type === 'topic'" class="box-card" style="min-height: 200px;">
                    <h3>TA的话题({{page.total}})
                    </h3>
                    <el-divider></el-divider>
                    <el-row v-for="item in cardListData" :key="item.id" class="question-box" style="border-bottom: #c0c4cc 1px solid;color: #606266;font-size: 14px;">
                        <el-col :span="17">
                            <div class="title-cusor" @click="showDetail(item.id, item.user_id)">
                                <el-tag>{{item.topic}}</el-tag>
                                <el-tag>{{item.catesShow}}</el-tag>
                                <span>{{item.title}}</span><span v-if="item.lead !==''"> - {{item.lead}}</span>
                            </div>
                        </el-col>
                        <el-col :span="7" style="text-align: right;">
                            <el-tag><i class="el-icon-star-on"></i>{{item.favourite_count}}</el-tag>
                            <el-divider direction="vertical"></el-divider>
                            <el-tooltip class="item" effect="light" :content="`关注(${item.followers_count}) / 评论(${item.answers_count}) / 喜欢(${item.favourite_count}) / 阅读(${item.read_count}) / 创建于：${item.created_at}`" placement="bottom">
                                <span>{{item.timeShow}}</span>
                            </el-tooltip>
                        </el-col>
                    </el-row>
                    <avue-empty v-if="cardListData.length === 0" desc="TA还没有创建任何讨论话题">
                    </avue-empty>
                    <el-pagination
                        @current-change="handleCurrentChange"
                        :hide-on-single-page=true
                        prev-text="上一页"
                        next-text="下一页"
                        :current-page="page.currentPage"
                        :page-size="page.pageSize"
                        :page-count="page.total"
                        :total="page.total">
                    </el-pagination>
                </el-card>

                <el-card v-if="type === 'answer'" class="box-card" style="min-height: 200px;">
                    <h3>TA的回复({{page.total}})
                    </h3>
                    <el-divider></el-divider>
                    <el-row v-for="item in cardListData" :key="item.id" class="question-box" style="border-bottom: #c0c4cc 1px solid;color: #606266;font-size: 14px;">
                        <el-col :span="17">
                            <div class="title-cusor" @click="showDetail(item.id, item.user_id)">
                                <el-tag>{{item.topic}}</el-tag>
                                <el-tag>{{item.catesShow}}</el-tag>
                                <span>{{item.title}}</span><span v-if="item.lead !==''"> - {{item.lead}}</span>
                            </div>
                        </el-col>
                        <el-col :span="7" style="text-align: right;">
                            <el-tag><i class="el-icon-star-on"></i>{{item.favourite_count}}</el-tag>
                            <el-divider direction="vertical"></el-divider>
                            <el-tooltip class="item" effect="light" :content="`关注(${item.followers_count}) / 评论(${item.answers_count}) / 喜欢(${item.favourite_count}) / 阅读(${item.read_count}) / 创建于：${item.created_at}`" placement="bottom">
                                <span>{{item.timeShow}}</span>
                            </el-tooltip>
                        </el-col>
                    </el-row>
                    <avue-empty v-if="cardListData.length === 0">
                    </avue-empty>
                    <el-pagination
                        @current-change="handleCurrentChange"
                        :hide-on-single-page=true
                        prev-text="上一页"
                        next-text="下一页"
                        :current-page="page.currentPage"
                        :page-size="page.pageSize"
                        :page-count="page.total"
                        :total="page.total">
                    </el-pagination>
                </el-card>

                <el-card v-if="type === 'collection'" class="box-card" style="min-height: 200px;">
                    <h3>TA的收藏博文({{page.total}})</h3>
                    <el-divider></el-divider>
                    <el-row v-for="item in cardListData" :key="item.id" class="question-box" style="border-bottom: #c0c4cc 1px solid;color: #606266;font-size: 14px;">
                        <el-col :span="17">
                            <div class="title-cusor" @click="showDetail(item.id, item.user_id)">
                                <el-tag>{{item.topic}}</el-tag>
                                <span>{{item.title}}</span><span v-if="item.lead !==''"> - {{item.lead}}</span>
                            </div>
                        </el-col>
                        <el-col :span="7" style="text-align: right;">
                            <el-tag><i class="el-icon-star-on"></i>{{item.collections}}</el-tag>
                            <el-divider direction="vertical"></el-divider>
                            <el-tooltip class="item" effect="light" :content="`关注(${item.followers_count}) / 评论(${item.answers_count}) / 喜欢(${item.favourite_count}) / 阅读(${item.read_count}) / 创建于：${item.created_at}`" placement="bottom">
                                <span>{{item.timeShow}}</span>
                            </el-tooltip>
                        </el-col>
                    </el-row>
                    <avue-empty v-if="cardListData.length === 0" desc="暂无收藏">
                    </avue-empty>
                    <el-pagination
                        @current-change="handleCurrentChange"
                        :hide-on-single-page=true
                        prev-text="上一页"
                        next-text="下一页"
                        :current-page="page.currentPage"
                        :page-size="page.pageSize"
                        :page-count="page.total"
                        :total="page.total">
                    </el-pagination>
                </el-card>

                <el-card v-if="type === 'followed'" class="box-card" style="min-height: 200px;">
                    <h3>TA关注的({{page.total}})
                    </h3>
                    <el-divider></el-divider>
                    <el-row v-for="item in cardListData" :key="item.id" class="question-box" style="border-bottom: #c0c4cc 1px solid;color: #606266;font-size: 14px;">
                        <el-col :span="17">
                            <div class="title-cusor" @click="showDetail(item.id, item.user_id)">
                                <el-tag>{{item.topic}}</el-tag>
                                <el-tag>{{item.catesShow}}</el-tag>
                                <span>{{item.title}}</span><span v-if="item.lead !==''"> - {{item.lead}}</span>
                            </div>
                        </el-col>
                        <el-col :span="7" style="text-align: right;">
                            <el-tag><i class="el-icon-star-on"></i>{{item.favourite_count}}</el-tag>
                            <el-divider direction="vertical"></el-divider>
                            <el-tooltip class="item" effect="light" :content="`关注(${item.followers_count}) / 评论(${item.answers_count}) / 喜欢(${item.favourite_count}) / 阅读(${item.read_count}) / 创建于：${item.created_at}`" placement="bottom">
                                <span>{{item.timeShow}}</span>
                            </el-tooltip>
                        </el-col>
                    </el-row>
                    <avue-empty v-if="cardListData.length === 0" desc="TA还没有关注任何话题">
                    </avue-empty>
                    <el-pagination
                        @current-change="handleCurrentChange"
                        :hide-on-single-page=true
                        prev-text="上一页"
                        next-text="下一页"
                        :current-page="page.currentPage"
                        :page-size="page.pageSize"
                        :page-count="page.total"
                        :total="page.total">
                    </el-pagination>
                </el-card>

                <el-card v-if="type === 'favourited'" class="box-card" style="min-height: 200px;">
                    <h3>TA喜欢的({{page.total}})
                    </h3>
                    <el-divider></el-divider>
                    <el-row v-for="item in cardListData" :key="item.id" class="question-box" style="border-bottom: #c0c4cc 1px solid;color: #606266;font-size: 14px;">
                        <el-col :span="17">
                            <div class="title-cusor" @click="showDetail(item.id, item.user_id)">
                                <el-tag>{{item.topic}}</el-tag>
                                <el-tag>{{item.catesShow}}</el-tag>
                                <span>{{item.title}}</span><span v-if="item.lead !==''"> - {{item.lead}}</span>
                            </div>
                        </el-col>
                        <el-col :span="7" style="text-align: right;">
                            <el-tag><i class="el-icon-star-on"></i>{{item.favourite_count}}</el-tag>
                            <el-divider direction="vertical"></el-divider>
                            <el-tooltip class="item" effect="light" :content="`关注(${item.followers_count}) / 评论(${item.answers_count}) / 喜欢(${item.favourite_count}) / 阅读(${item.read_count}) / 创建于：${item.created_at}`" placement="bottom">
                                <span>{{item.timeShow}}</span>
                            </el-tooltip>
                        </el-col>
                    </el-row>
                    <avue-empty v-if="cardListData.length === 0" desc="TA还没有喜欢话题">
                    </avue-empty>
                    <el-pagination
                        @current-change="handleCurrentChange"
                        :hide-on-single-page=true
                        prev-text="上一页"
                        next-text="下一页"
                        :current-page="page.currentPage"
                        :page-size="page.pageSize"
                        :page-count="page.total"
                        :total="page.total">
                    </el-pagination>
                </el-card>

                <el-card v-if="type === 'personal'" class="box-card" style="min-height: 200px;">
                    <avue-form ref="form" v-model="personalObj" :option="option">
                    </avue-form>
                </el-card>
            </el-col>
        </el-row>
    </el-main>
</template>

<script>
    import {
        getToken, removeToken
    } from '../../util/auth'
    export default {
        inject: ['reload'],
        data() {
            return {
                sizeValue: 'mini',
                personalObj: {},
                personalSettingKeys: {},
                personalExtraOption: [],
                zhihuUserInfo: null,
                type: 'personal',
                personNums: {
                    blog: 0,
                    question: 0,
                    link: 0,
                    discuss: 0,
                    topic: 0,
                    answer: 0,
                    collection: 0,
                    followed: 0,
                    favourited: 0,
                    follower: 0,
                    fance: 0
                },
                cardListData: [],
                page: {
                    currentPage: 1,
                    total: 0,
                    pageSize: 10
                },
            }
        },
        computed: {
            option() {
                return {
                    size: this.sizeValue,
                    submitSize: this.sizeValue,
                    submitBtn: false,
                    emptyBtn: false,
                    labelWidth: 120,
                    column: [{
                        label: "昵称",
                        prop: "nickname",
                        type: 'text',
                        span: 24,
                        disabled: true,
                        readonly: true,
                    }, {
                        label: "用户头像",
                        prop: "avatar",
                        span: 24,
                        type: 'upload',
                        listType: 'picture-img',
                        disabled: true,
                        readonly: true,
                    }]
                }
            }
        },
        mounted() {
            if (localStorage.getItem('zhihuUserInfo') && localStorage.getItem('zhihuUserInfo') !== 'null' && getToken()) {
                this.zhihuUserInfo = JSON.parse(localStorage.getItem('zhihuUserInfo'))
            }
            this.getPersonalTotalNums()
        },
        created() {
            this.getPersonalSettingKeys()
        },
        methods: {
            setCurrentUser(isRefresh) {
                this.personalObj = {}
                const params = {
                    user_id: this.$route.params.userId
                }
                this.axios.post(this.$API.ZHIHUAPI.getPersonalInfoByUserId, this.qs.stringify(
                    params)).then((res) => {
                    res = res.data
                    if (res.code === 10000) {
                        let zhihuUserInfo = res.data
                        this.personalObj = zhihuUserInfo
                        if (this.personalObj.settings === null || this.personalObj === "null") {
                            this.personalSettingKeys.forEach(item => {
                                this.personalObj[item] = ""
                            })
                        } else {
                            Object.keys(this.personalObj.settings).forEach((item, index) => {
                                this.personalObj[item] = this.personalObj.settings[item]
                            })
                        }
                        if (isRefresh !== true) {
                            Object.keys(this.personalExtraOption).forEach((item, index) => {
                                let tempColumn = {
                                    label: this.personalExtraOption[item],
                                    prop: item,
                                    type: 'text',
                                    span: 24,
                                    disabled: true,
                                    readonly: true,
                                    placeholder: ''
                                }
                                this.option.column.push(tempColumn)
                            })
                        }
                    }
                }).catch(() => {

                })
            },
            getPersonalSettingKeys(isRefresh) {
                const _this = this
                const params = {}
                _this.axios.post(_this.$API.ZHIHUAPI.systemConfigGetting + "/personal", _this.qs.stringify(
                    params)).then((res) => {
                    res = res.data
                    if (res.code === 10000) {
                        _this.personalSettingKeys = {}
                        _this.personalExtraOption = []
                        if (res.hasOwnProperty('data') && Object.keys(res.data).length > 0) {
                            _this.personalSettingKeys = Object.keys(res.data)
                            _this.personalExtraOption = res.data
                        }
                        this.setCurrentUser(isRefresh)
                    } else {
                        _this.$message({
                            showClose: false,
                            message: res.message,
                            type: 'error'
                        })

                    }
                }).catch(() => {
                    _this.$message({
                        showClose: false,
                        message: '网络连接失败，请重试！',
                        type: 'error'
                    })
                })
            },
            handlerCommand(val) {
                this.type = val
                this.page.currentPage = 1
                this.page.total = 0
                this.page.pageSize = 10
                this.cardListData = []
                this[val]()
            },
            goCrd() {
                if (this.type === 'blog') {
                    this.$router.push({path: "/customer/blogsCrd"})
                } else if (this.type === 'discuss') {
                    this.$router.push({path: "/customer/discussCrd"})
                } else if (this.type === 'link') {
                    this.$router.push({path: "/customer/linksCrd"})
                } else if (this.type === 'question') {
                    this.$router.push({path: "/customer/questionsCrd"})
                }
            },
            showDetail(question_id, user_id) {
                this.$router.push({path: `/question/${question_id}/${user_id}`})
            },
            showFFDetail(userId) {
                if (this.zhihuUserInfo.id == userId) {
                    this.$router.push({
                        path: "/customer"
                    });
                } else {
                    this.$router.push({path: `/custuser/${userId}`})
                    this.reload()
                }
            },
            getPersonalTotalNums() {
                const _this = this
                const params = {
                    user_id: _this.$route.params.userId
                }
                _this.axios.post(_this.$API.ZHIHUAPI.getPersonalTotalNums, _this.qs.stringify(params)).then((
                    res) => {
                    res = res.data
                    // console.log(res)
                    if (res.code === 10000) {
                        if (res.hasOwnProperty('data') && Object.keys(res.data).length > 0) {
                            _this.personNums = res.data
                        }
                    }
                }).catch(() => {})
            },
            handleCurrentChange (currentPage) {
                this.page.currentPage = currentPage
                this[this.type]()
            },
            personal() {
                // 不能删
            },
            favourited() {
                const _this = this
                const params = {
                    page: _this.page.currentPage,
                    limit: _this.page.pageSize,
                    user_id: _this.$route.params.userId
                }
                _this.axios.post(_this.$API.ZHIHUAPI.myFavouriteQuestionList, _this.qs.stringify(params)).then((res) => {
                    res = res.data
                    if (res.code === 10000) {
                        if (res.hasOwnProperty('data') && Object.keys(res.data).length > 0) {
                            _this.cardListData = res.data.list
                            _this.page.total = res.data.count
                        } else {
                            _this.cardListData = []
                            _this.page.total = 0
                        }
                    } else {
                        _this.$message({
                            showClose: false,
                            message: res.message,
                            type: 'error'
                        })
                        _this.cardListData = []
                        _this.page.total = 0
                    }
                }).catch(() => {
                    _this.$message({
                        showClose: false,
                        message: '网络连接失败，请重试！',
                        type: 'error'
                    })
                    _this.cardListData = []
                    _this.page.total = 0
                })
            },
            followed() {
                const _this = this
                const params = {
                    page: _this.page.currentPage,
                    limit: _this.page.pageSize,
                    user_id: _this.$route.params.userId
                }
                _this.axios.post(_this.$API.ZHIHUAPI.myFollowerQuestionList, _this.qs.stringify(params)).then((res) => {
                    res = res.data
                    if (res.code === 10000) {
                        if (res.hasOwnProperty('data') && Object.keys(res.data).length > 0) {
                            _this.cardListData = res.data.list
                            _this.page.total = res.data.count
                        } else {
                            _this.cardListData = []
                            _this.page.total = 0
                        }
                    } else {
                        _this.$message({
                            showClose: false,
                            message: res.message,
                            type: 'error'
                        })
                        _this.cardListData = []
                        _this.page.total = 0
                    }
                }).catch(() => {
                    _this.$message({
                        showClose: false,
                        message: '网络连接失败，请重试！',
                        type: 'error'
                    })
                    _this.cardListData = []
                    _this.page.total = 0
                })
            },
            collection() {
                const _this = this
                const params = {
                    page: _this.page.currentPage,
                    limit: _this.page.pageSize,
                    user_id: _this.$route.params.userId
                }
                _this.axios.post(_this.$API.ZHIHUAPI.getCollectionList, _this.qs.stringify(params)).then((res) => {
                    res = res.data
                    if (res.code === 10000) {
                        if (res.hasOwnProperty('data') && Object.keys(res.data).length > 0) {
                            _this.cardListData = res.data.list
                            _this.page.total = res.data.count
                        } else {
                            _this.cardListData = []
                            _this.page.total = 0
                        }
                    } else {
                        _this.$message({
                            showClose: false,
                            message: res.message,
                            type: 'error'
                        })
                        _this.cardListData = []
                        _this.page.total = 0
                    }
                }).catch(() => {
                    _this.$message({
                        showClose: false,
                        message: '网络连接失败，请重试！',
                        type: 'error'
                    })
                    _this.cardListData = []
                    _this.page.total = 0
                })
            },
            answer() {
                const _this = this
                const params = {
                    page: _this.page.currentPage,
                    limit: _this.page.pageSize,
                    user_id: _this.$route.params.userId
                }
                _this.axios.post(_this.$API.ZHIHUAPI.myCommentQuestionList, _this.qs.stringify(params)).then((res) => {
                    res = res.data
                    // console.log(res)
                    if (res.code === 10000) {
                        if (res.hasOwnProperty('data') && Object.keys(res.data).length > 0) {
                            _this.cardListData = res.data.list
                            _this.page.total = res.data.count
                        } else {
                            _this.cardListData = []
                            _this.page.total = 0
                        }
                    } else {
                        _this.$message({
                            showClose: false,
                            message: res.message,
                            type: 'error'
                        })
                        _this.cardListData = []
                        _this.page.total = 0
                    }
                }).catch(() => {
                    _this.$message({
                        showClose: false,
                        message: '网络连接失败，请重试！',
                        type: 'error'
                    })
                    _this.cardListData = []
                    _this.page.total = 0
                })
            },
            topic() {
                const _this = this
                const params = {
                    page: _this.page.currentPage,
                    limit: _this.page.pageSize,
                    user_id: _this.$route.params.userId
                }
                _this.axios.post(_this.$API.ZHIHUAPI.listQuestion, _this.qs.stringify(params)).then((res) => {
                    res = res.data
                    if (res.code === 10000) {
                        if (res.hasOwnProperty('data') && Object.keys(res.data).length > 0) {
                            _this.cardListData = res.data.list
                            _this.page.total = res.data.count
                        } else {
                            _this.cardListData = []
                            _this.page.total = 0
                        }
                    } else {
                        _this.$message({
                            showClose: false,
                            message: res.message,
                            type: 'error'
                        })
                        _this.cardListData = []
                        _this.page.total = 0
                    }
                }).catch(() => {
                    _this.$message({
                        showClose: false,
                        message: '网络连接失败，请重试！',
                        type: 'error'
                    })
                    _this.cardListData = []
                    _this.page.total = 0
                })
            },
            discuss() {
                const _this = this
                const params = {
                    key: 'discuss',
                    page: _this.page.currentPage,
                    limit: _this.page.pageSize,
                    user_id: _this.$route.params.userId
                }
                _this.axios.post(_this.$API.ZHIHUAPI.listQuestion, _this.qs.stringify(params)).then((res) => {
                    res = res.data
                    if (res.code === 10000) {
                        if (res.hasOwnProperty('data') && Object.keys(res.data).length > 0) {
                            _this.cardListData = res.data.list
                            _this.page.total = res.data.count
                        } else {
                            _this.cardListData = []
                            _this.page.total = 0
                        }
                    } else {
                        _this.$message({
                            showClose: false,
                            message: res.message,
                            type: 'error'
                        })
                        _this.cardListData = []
                        _this.page.total = 0
                    }
                }).catch(() => {
                    _this.$message({
                        showClose: false,
                        message: '网络连接失败，请重试！',
                        type: 'error'
                    })
                    _this.cardListData = []
                    _this.page.total = 0
                })
            },
            link() {
                const _this = this
                const params = {
                    key: 'link',
                    page: _this.page.currentPage,
                    limit: _this.page.pageSize,
                    user_id: _this.$route.params.userId
                }
                _this.axios.post(_this.$API.ZHIHUAPI.listQuestion, _this.qs.stringify(params)).then((res) => {
                    res = res.data
                    if (res.code === 10000) {
                        if (res.hasOwnProperty('data') && Object.keys(res.data).length > 0) {
                            _this.cardListData = res.data.list
                            _this.page.total = res.data.count
                        } else {
                            _this.cardListData = []
                            _this.page.total = 0
                        }
                    } else {
                        _this.$message({
                            showClose: false,
                            message: res.message,
                            type: 'error'
                        })
                        _this.cardListData = []
                        _this.page.total = 0
                    }
                }).catch(() => {
                    _this.$message({
                        showClose: false,
                        message: '网络连接失败，请重试！',
                        type: 'error'
                    })
                    _this.cardListData = []
                    _this.page.total = 0
                })
            },
            question() {
                const _this = this
                const params = {
                    key: 'question',
                    page: _this.page.currentPage,
                    limit: _this.page.pageSize,
                    user_id: _this.$route.params.userId
                }
                _this.axios.post(_this.$API.ZHIHUAPI.listQuestion, _this.qs.stringify(params)).then((res) => {
                    res = res.data
                    if (res.code === 10000) {
                        if (res.hasOwnProperty('data') && Object.keys(res.data).length > 0) {
                            _this.cardListData = res.data.list
                            _this.page.total = res.data.count
                        } else {
                            _this.cardListData = []
                            _this.page.total = 0
                        }
                    } else {
                        _this.$message({
                            showClose: false,
                            message: res.message,
                            type: 'error'
                        })
                        _this.cardListData = []
                        _this.page.total = 0
                    }
                }).catch(() => {
                    _this.$message({
                        showClose: false,
                        message: '网络连接失败，请重试！',
                        type: 'error'
                    })
                    _this.cardListData = []
                    _this.page.total = 0
                })
            },
            blog() {
                const _this = this
                const params = {
                    key: 'blog',
                    page: _this.page.currentPage,
                    limit: _this.page.pageSize,
                    user_id: _this.$route.params.userId
                }
                _this.axios.post(_this.$API.ZHIHUAPI.listQuestion, _this.qs.stringify(params)).then((res) => {
                    res = res.data
                    if (res.code === 10000) {
                        if (res.hasOwnProperty('data') && Object.keys(res.data).length > 0) {
                            _this.cardListData = res.data.list
                            _this.page.total = res.data.count
                        } else {
                            _this.cardListData = []
                            _this.page.total = 0
                        }
                    } else {
                        _this.$message({
                            showClose: false,
                            message: res.message,
                            type: 'error'
                        })
                        _this.cardListData = []
                        _this.page.total = 0
                    }
                }).catch(() => {
                    _this.$message({
                        showClose: false,
                        message: '网络连接失败，请重试！',
                        type: 'error'
                    })
                    _this.cardListData = []
                    _this.page.total = 0
                })
            },
            fance() {
                const _this = this
                const params = {
                    page: _this.page.currentPage,
                    limit: _this.page.pageSize,
                    user_id: _this.$route.params.userId
                }
                _this.axios.post(_this.$API.ZHIHUAPI.followerFanceList, _this.qs.stringify(params)).then((res) => {
                    res = res.data
                    // console.log(res)
                    if (res.code === 10000) {
                        if (res.hasOwnProperty('data') && Object.keys(res.data).length > 0) {
                            _this.cardListData = res.data.list
                            _this.page.total = res.data.count
                        } else {
                            _this.cardListData = []
                            _this.page.total = 0
                        }
                    } else {
                        _this.$message({
                            showClose: false,
                            message: res.message,
                            type: 'error'
                        })
                        _this.cardListData = []
                        _this.page.total = 0
                    }
                }).catch(() => {
                    _this.$message({
                        showClose: false,
                        message: '网络连接失败，请重试！',
                        type: 'error'
                    })
                    _this.cardListData = []
                    _this.page.total = 0
                })
            },
            follower() {
                const _this = this
                const params = {
                    page: _this.page.currentPage,
                    limit: _this.page.pageSize,
                    user_id: _this.$route.params.userId
                }
                _this.axios.post(_this.$API.ZHIHUAPI.followerList, _this.qs.stringify(params)).then((res) => {
                    res = res.data
                    if (res.code === 10000) {
                        if (res.hasOwnProperty('data') && Object.keys(res.data).length > 0) {
                            _this.cardListData = res.data.list
                            _this.page.total = res.data.count
                        } else {
                            _this.cardListData = []
                            _this.page.total = 0
                        }
                    } else {
                        _this.$message({
                            showClose: false,
                            message: res.message,
                            type: 'error'
                        })
                        _this.cardListData = []
                        _this.page.total = 0
                    }
                }).catch(() => {
                    _this.$message({
                        showClose: false,
                        message: '网络连接失败，请重试！',
                        type: 'error'
                    })
                    _this.cardListData = []
                    _this.page.total = 0
                })
            },
        }
    }
</script>

<style scoped>
    .num-tag {
        display: inline-block;
        float: right;
    }
    .title-tag {
        color: #636b6f;
        padding: 3px;
        font-weight: 400;
        opacity: .9;
        cursor: pointer;
    }
    .title-tag-check {
        color: #636b6f;
        padding: 3px;
        font-weight: 400;
        opacity: .9;
        cursor: pointer;
        color: #409EFF;
        background-color: #C0C4CC;
    }
    .title-tag:hover {
        color: #409EFF;
        background-color: #DCDFE6;
    }
    .title-blod {
        font-weight: 700;
        color: #a5a5a5!important;
        font-size: 1rem!important;
    }
    .crd-btn {
        display: inline-block;
        float: right;
    }
    .title-cusor {
        cursor: pointer;
    }
    .title-cusor:hover {
        color: #409EFF;
    }
</style>
